<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>{{ title }}</title>
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink">
<style>
    ::selection {
        background: rgba(0, 149, 255, .1);
    }
    body:before {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: .3;
        z-index: -1;
        content: "";
        position: fixed;
        background-image: linear-gradient(135deg, #CE9FFC 10%, #7367F0 100%);
    }
    .mdui-textfield-input {
        float: left;
        width: 75%;
        text-transform: none;
    }
    .mdui-btn {
        width: 12.5%;
    }
    .mdui-container {
        max-width: 900px;
        margin-top: 6em;
        margin-bottom: 4em;
    }
    .mdui-btn, .mdui-fab {
        min-width: 0px;
    }
    .mdui-card {
        opacity: .8;
        padding: 2em;
        border-radius: 6px;
    }
    .down .mdui-btn {
        width: auto;
        margin-left: 1.5em;
        margin-bottom: 0.5em;
    }
    p {
        opacity: .8;
    }
    .mdui-card-content {
        padding: 16px 0 0 0;
    }
    .mdui-textfield.mdui-textfield-floating-label {
        display: flex;
        align-items: center;
    }
    .mdui-textfield-input, .mdui-btn {
        margin-right: 8px;
    }

    /* 移动端适配 */
    @media (max-width: 600px) {
        .mdui-container {
            margin-top: 4em;
            margin-bottom: 2em;
        }
        .mdui-card {
            padding: 1em;
        }
        .mdui-textfield-input {
            width: 100%;
            float: none;
        }
        .mdui-btn {
            width: 100%;
            margin-top: 0.5em;
        }
        .down .mdui-btn {
            width: 100%;
            margin-left: 0;
        }
        .mdui-textfield.mdui-textfield-floating-label {
            flex-direction: column;
        }
        .mdui-textfield-input, .mdui-btn {
            margin-right: 0;
        }
    }
</style>
<main class="mdui-container">
    <div class="mdui-card">
        <img class="mdui-img-circle mdui-center" style="width: 150px;" src="https://cdn.jsdelivr.net/gh/5ime/img/avatar.jpg"/>
        <h1 class='mdui-text-center'>在线短视频去水印解析</h1>
        <div class="mdui-typo">
            <p><strong>目前支持: </strong>抖音/皮皮虾/火山/微视/最右/快手/全民小视频/皮皮搞笑/梨视频/西瓜/微博/虎牙/绿洲/好看/逗拍/美拍/新片场/A站/全民K歌/6间房</p>
            <p>
                <strong>温馨提示: </strong><br/>
                1. 粘贴视频地址时<u>无需删除文案</u><small> 但如果视频链接正确但解析失败请删掉文案后重试</small><br/>
                2. 点击下载视频跳转时, 可能会被对应网站识别, 报 <u>403 Forbidden</u>, 可以在 下载视频 按钮, 右键复制链接地址, 新开浏览器标签页打开即可
            </p>
            <hr/>
        </div>
        <div class="mdui-card-content mdui-typo">
            <div class="mdui-textfield mdui-textfield-floating-label">
                <input class="mdui-textfield-input" type="text" id="url" placeholder="请粘贴视频分享地址" required/>
                <div class="mdui-textfield-error">
                    需要解析的视频地址不能为空
                </div>
                <!-- 解析按钮 -->
                <button class="mdui-btn mdui-color-theme-accent mdui-ripple" onclick="setValue()">解析</button>
                <!-- 新增清空按钮 -->
                <button class="mdui-btn mdui-color-red mdui-ripple" onclick="clearInput()">清空</button>
            </div>
        </div>
        <div class="down mdui-text-center"></div>
    </div>
</main>
<script>
function setValue() {
    var data = document.getElementById("url").value;
    let regex = /http[s]?:\/\/[\w.-]+[\w\/-]*[\w.-]*\??[\w=&:\-\+\%]*[/]*/;
    var v = data.match(regex)[0];
    console.log(v);

    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 链接地址需要用encodeURIComponent加密, 否则会导致原视频链接中&后的字符被识别为本链接的参数而丢弃
    xmlhttp.open("GET", "/video/share/url/parse?url=" + encodeURIComponent(v), false);
    xmlhttp.send();
    var jsonObj = JSON.parse(xmlhttp.responseText);
    console.log(jsonObj);
    if (jsonObj.code == 200) {
        mdui.snackbar({
            message: '解析成功'
        });

        let successHtml = '<h4>' + jsonObj.data.title + ' </h4>';
        successHtml += '<a class="mdui-btn mdui-btn-raised" href="' + jsonObj.data.cover_url + '" target="_blank" download="video" referrerpolicy="no-referrer">下载封面</a>';

        // 如果video_url不为空, 则显示下载视频按钮
        if (jsonObj.data.video_url != "") {
            successHtml += '<a class="mdui-btn mdui-btn-raised" href="' + jsonObj.data.video_url + '" target="_blank" download="video" referrerpolicy="no-referrer">下载视频</a>';
        }

        // 如果 jsonObj.data.images 是数组， 并且长度大于0, 则img展示图片
        if (jsonObj.data.images && jsonObj.data.images.length > 0) {
            successHtml += "<hr/>";
            successHtml += '<h4>图集</h4>';
            jsonObj.data.images.forEach(function (item) {
                successHtml += '<div style="display: inline-block; margin: 1em; text-align: center;">';
                successHtml += '<img src="' + item.url + '" style="width: 160px; display: block; margin-bottom: 0.5em;"/>';
                // 如果 item.live_photo_url 不为空， 显示下载按钮
                if (item.live_photo_url) {
                    successHtml += '<a class="mdui-btn mdui-btn-raised" href="' + item.live_photo_url + '" target="_blank" download="video" referrerpolicy="no-referrer" style="text-transform: none;">下载LivePhoto</a>';
                }

                successHtml += '</div>';
            });
        }

        $(".down").html(successHtml);
    } else {
        mdui.snackbar({
            message: "解析失败,视频不存在或者链接不正确:<br/>" + jsonObj.msg
        });
    }
}

// 新增清空输入框内容的函数
function clearInput() {
    document.getElementById("url").value = "";
}
</script>
</body>
</html>
